import Layout from '../../lib/components/Layout';
export default Layout;

# Misc

## Subpixel and accelerated positioning

Instead of `top{:.objectKey}` and `left{:.objectKey}` as shown
throughout the docs, you can use `transform: translate(){:sass}`
instead to position the floating element for increased
performance.

```js
Object.assign(floatingEl.style, {
  top: '0',
  left: '0',
  transform: `translate(${Math.round(x)}px,${Math.round(y)}px)`,
});
```

`x` and `y` can contain decimals, so unless the
`transform{:.objectKey}` translation is placed evenly on the
device's subpixel grid, then there will be blurring. You can
check `window.devicePixelRatio{:js}` to round by DPR.

### 3D transforms

You can also promote the floating element to its own layer:

<!-- prettier-ignore -->
```js
Object.assign(floatingEl.style, {
  top: '0',
  left: '0',
  transform: `translate3d(${Math.round(x)}px,${Math.round(y)}px,0)`,
});
```

If you're animating the location of the floating element, using
`transform{:.objectKey}` will offer smoother animations.

## z-index stacking

Floating UI does not have opinions about how your elements stack
on the z-axis. This means your element may be occluded beneath
another one if it has a higher `z-index`.

If you find your floating element is being clipped by another
element, some common workarounds include:

- Using the `"fixed"{:js}` strategy to "break" the floating
  element out of a clipping context — use this sparingly.
- The floating element can be appended to a root ancestor node
  inside `<body>{:html}`, e.g.
  `<div id="floating-root"></div>{:html}`

In the future, Floating UI may
[enable you to specify elements to avoid](https://github.com/floating-ui/floating-ui/issues/1440),
so multiple floating elements can avoid colliding with each other
intelligently without worrying about their `z-index`.
